<template>
    <div class="styleSettingTwo">        
        <el-col :span="11">
            <el-input placeholder="" style="width:260px" v-model="toChild.content"></el-input>
        </el-col>
        <el-col :span="12"  style="font-size:12px;line-height:35px;height:35px;">
            <label class="reminder">在没有播报信息录入时，屏幕默认出现该文字</label>
        </el-col>
        <el-col :span="24">
            <div style="width:100%;padding-top: 10px;">                                  
                <el-select v-model="toChild.fontId" placeholder="请选择" @change="addStyleSheet(toChild.fontId)" style="width:160px;margin-right:5px;">
                    <el-option
                    v-for="item in fontOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-tooltip class="item" effect="dark" content="字体大小" placement="bottom">
                    <el-input-number v-model="toChild.fontSize" :min="12" :max="90" style="width:100px;margin-right:5px;"></el-input-number> 
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="字体颜色" placement="bottom">
                    <el-color-picker
                    v-model="toChild.fontColor"
                    style="margin-right:5px;">
                    </el-color-picker>
                    </el-tooltip>
                <el-tooltip class="item" effect="dark" content="背景颜色" placement="bottom">
                    <el-color-picker
                    v-model="toChild.backgroundColor"
                    style="margin-right:5px;">
                    </el-color-picker> 
                </el-tooltip>
                <div class="buttonGroup">
                    <el-tooltip class="item" effect="dark" content="加粗" placement="bottom"> 
                        <a class="info" @click="toChild.isBold = !toChild.isBold">
                            <span class="iconfont ss-font-weight" :class="{'active': toChild.isBold}"></span>
                        </a>
                    </el-tooltip>    
                    <el-tooltip class="item" effect="dark" content="倾斜" placement="bottom">
                        <a class="info" @click="toChild.isItalic = !toChild.isItalic">
                            <span class="iconfont ss-qingxie" :class="{'active': toChild.isItalic}"></span>
                        </a>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="下划线" placement="bottom">
                        <a class="info" @click="toChild.isUnderline = !toChild.isUnderline">
                            <span class="iconfont ss-xiahuaxian" :class="{'active': toChild.isUnderline}"></span>
                        </a>
                    </el-tooltip>
                </div>
                <el-button @click="perview" round>预览</el-button> 
                <el-button @click="savaData" v-if="toChild.alterType" round>保存</el-button>
            </div>    
            <div class="modal-preview">
                <div class="preview-box" v-if="!toChild.previewHtml">
                    <span class="preview-placeholder" >预览区域</span>
                </div>
                <div class="preview-box" v-else-if="toChild.previewHtml" v-html="toChild.previewHtml">
                    {{toChild.previewHtml}}
                </div>
            </div>
        </el-col>   
    </div>
</template>

<script>
    import fonts from '@/utils/fonts';
    // import conf from '../../../../../utils/dataSourceConfig';
    import $ from 'jquery'       
    export default {
        name: 'styleSettingTwo',
        props: ["toChild"],
        data() {
            return {
                fontOptions: fonts,  //字体     
                // conf: conf
            }
        },
        methods: {
            perview(){  //预览内容
                let item = this.toChild,html = "", realContent = "";
                // console.info(perviewContent,"预览内容");
                this.toChild.previewHtml = "";
                let cssString,          // 保存样式字符串
                    result = "",        // 用于pc端预览显示的html字符串
                    realResult = "";    // 用于提交到后台移动端解析的字符串
                if(item.content){
                    let fontFamily = item.fontFamily ?　item.fontFamily.fontFamily: '';
                    cssString = `style=${fontFamily?("font-family:"+fontFamily):""};${item.fontSize?("font-size:"+item.fontSize + "px"):""};${item.fontColor?("color:"+item.fontColor):""};${item.backgroundColor?("background-color:"+item.backgroundColor):""};${item.isBold?("font-weight:bold"):""};${item.isItalic?("font-style:italic"):""};${item.isUnderline?("text-decoration:underline"):""};`                        
                    // 空格替换
                    result = `<span ${cssString}>${item.content.replace(/ /g, '&nbsp;')}</span>`;
                    realResult = `<span ${cssString}>${item.content}</span>`;
                    html += result;
                    realContent += realResult;  
                    this.addStyleSheet(item.fontFamily.id)                                        
                }else if(item.isEnter){
                    html += "<br/>";
                    realContent += "<br/>";
                }                    
                this.toChild.previewHtml = html;
                this.toChild.realContent = realContent;                              
            },
            savaData(){
                this.perview();
                this.$emit("changeMsg", this.toChild)
            },          
            // 添加字体css
            addStyleSheet(fontId) {
                if(fontId){
                    let result = this.fontOptions.find(item => {                    
                        return item.id === fontId;
                    });
                    this.toChild.fontFamily = result;
                    let fileHost = "";
                    // this.conf.fontList.find(f => {                    
                    //     return f.id === fontId
                    // }); 
                    if(!fileHost) return;                          
                    let cssString = "@font-face{font-family:" + this.toChild.fontFamily.fontFamily + ";src: url(" + fileHost.name + ");}";
                    let b = document.getElementsByTagName("style")[0],
                        c = document.createTextNode(cssString);
                    b.appendChild(c)
                }                 
                // if ($(b)[0].innerText.indexOf(this.toChild.fontFamily.fontFamily) < 0) {
                //     b.appendChild(c)
                // }
            }                         
        }
    }
</script>
<style scoped lang="scss">
    .styleSettingTwo{
        .el-color-picker{
            top: 7px;
            display: inline-flex;
        }
        .el-form-item--small .el-form-item__label{
            line-height: 40px;
        }
        .el-form-item__error{
            left: 15px;
        }
        .active{
            font-weight: 800;
        }
        .info{
            display: inline-block;
            padding: 0px 10px;
            white-space: nowrap;
            cursor: pointer;
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
            text-align: center;
            margin-right: -4px;
            border-right: solid 1px #b3d8ff;   
            line-height: 32px;     
        }
        .info:last-child{
            border-right: none; 
        }
        .buttonGroup{
            margin-right:14px;
            display: inline-block;
            position: relative;
            top: 2px;
        }
        .el-form-item--small .el-form-item__content{
            line-height: 40px;
            height: 40px
        } 
        .el-checkbox__label{
            font-size: 12px;
        }  
        .modal-preview {
            padding-bottom: 0px;
        }
        .modal-preview .preview-box {
            width: 100%;
            min-height: 60px;
            padding: 20px 0;
            margin: 20px 0px 9px;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: center;
            background-color: #f5f5f5;
        }
        .preview-box .preview-placeholder {
            display: inline-block;
            font-size: 14px;
        } 
        .reminder{
            font-size: 12px;
            color: #afafaf;
        }

    } 
</style>